<template>
  <view class="wrap">
    <view v-show="cityModal" class="mask"></view>
    <view class="region">
      <view class="title">
        <text>已选区域</text>
        <text @tap="selectNation" v-if="canAll">全国</text>
      </view>
      <view class="selected-box">
        <text v-if="!selected.length">
          暂无销售区域，请点击省份或者城市进行选择
        </text>
        <view v-else>
          <view class="active" v-for="(item, index) in selected" :key="index">
            <text>{{ item.label }}</text>
            <text class="close" @tap="delSelect(index)">x</text>
          </view>
        </view>
      </view>
      <view class="title">按省份或市选择</view>
      <view class="selected-box">
        <view>
          <view
            v-for="(item, index) in provinceList"
            :key="index"
            :class="{ active: item.active }"
            @tap="handleCityModal(item)"
          >
            <text>{{ item.label }}</text>
          </view>
        </view>
      </view>
    </view>
    <view class="subBtn">
      <button @tap="handleConfirm">确定</button>
    </view>
    <view v-if="cityModal" class="city-modal">
      <view class="city-modal-header">
        <text>{{ provinceItem.label }}</text>
        <text @tap="selectAll" v-if="canAll">全选</text>
      </view>
      <view class="selected-box">
        <view>
          <view
            v-for="(item, index) in cityList"
            :key="index"
            :class="{ active: item.active }"
            @tap="selectCity(item)"
          >
            <text>{{ item.label }}</text>
          </view>
        </view>
      </view>
      <view class="city-modal-footer">
        <text class="cancel" @tap="cancelSelect">取消</text>
        <text class="submit" @tap="confirmSelect">确定</text>
      </view>
    </view>
  </view>
</template>

<script>
import request from '@utils/ajax'
import { getParam } from '@utils/'
import Taro, { navigateBack } from '@tarojs/taro'
export default {
  name: 'region-multiple',
  props: {
    value: Array
  },
  data() {
    return {
      loading: false,
      selected: [],
      provinceList: [],
      provinceItem: {},
      cityList: [],
      cityModal: false,
      type: 'car_area'
    }
  },
  computed: {
    canAll() {
      return this.type === 'sales_area'
    },
    handleValue: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    }
  },
  methods: {
    getAreas() {
      request({
        url: 'common/region'
      })
        .then(res => {
          this.provinceList = res.result
        })
        .catch(e => e)
    },
    handleCityModal(item) {
      this.provinceItem = item
      this.cityList = item.children
      setTimeout(() => {
        this.cityModal = true
      }, 0)
    },
    selectCity(item) {
      this.$set(item, 'active', !item.active)
    },
    selectAll() {
      this.cityList.forEach(item => {
        this.$set(item, 'active', true)
      })
    },
    selectNation() {
      Taro.eventCenter.trigger('selectArea', {
        field: getParam('field'),
        data: [
          {
            value: '100000',
            label: '全国',
            pname: ''
          }
        ]
      })
      navigateBack()
      // this.$emit('on-confirm', [{ label: '全国', value: '' }])
    },
    handleBlur() {
      this.cityModal && (this.cityModal = !this.cityModal)
    },
    delSelect(index) {
      this.selected.splice(index, 1)
    },
    confirmSelect() {
      const selected = this.cityList.filter(item => item.active)
      let needDel = []
      this.selected.forEach(({ label }) => {
        if (
          this.provinceItem.children.map(item => item.label).includes(label)
        ) {
          needDel.push(label)
        }
      })
      // 重置掉已选择的市
      needDel.forEach(item => {
        const index = this.selected.findIndex(({ label }) => label === item)
        this.selected.splice(index, 1)
      })
      const provinceIndex = this.selected.findIndex(
        ({ label }) => label === this.provinceItem.label
      )
      // 重置掉已选择的省
      provinceIndex > -1 && this.selected.splice(provinceIndex, 1)

      if (selected.length === this.cityList.length && this.canAll) {
        // 全选
        !this.selected.includes(this.provinceItem) &&
          this.selected.push(this.provinceItem)
      } else {
        // 单独选择
        selected.forEach(item => {
          !this.selected.includes(item) &&
            this.selected.push(
              Object.assign(item, {
                pid: this.provinceItem.value,
                pname: this.provinceItem.label
              })
            )
        })
      }
      selected.length && this.$set(this.provinceItem, 'active', true)
      this.cityModal = false
    },
    handleConfirm() {
      Taro.eventCenter.trigger('selectArea', {
        field: getParam('field'),
        data: this.selected
      })
      navigateBack()
      // this.$emit('on-confirm', this.selected)
    },
    handleCancel() {
      this.$emit('on-close')
    },
    cancelSelect() {
      this.cityModal = false
    }
  },
  created() {
    this.type = getParam('field')
    this.getAreas()
  },
  watch: {
    selected(val) {
      // 样式联动
      const selectedList = val.map(item => item.value)
      this.provinceList.forEach(({ value, children }, index) => {
        this.$set(this.provinceList[index], 'active', false)
        if (selectedList.includes(value)) {
          this.$set(this.provinceList[index], 'active', true)
          this.provinceList[index].children.forEach((item, i) => {
            this.$set(this.provinceList[index].children[i], 'active', true)
          })
        } else {
          children.forEach((item, i) => {
            this.$set(children[i], 'active', false)
            if (selectedList.includes(item.value)) {
              this.$set(this.provinceList[index], 'active', true)
              this.$set(children[i], 'active', true)
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss">
.wrap {
  height: 100vh;
  position: relative;
  background: #f9f9f9;
  text {
    display: inline-block;
  }
  .mask {
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 98;
    background: #000000;
    opacity: 0.3;
  }
  .region {
    height: 90vh;
    overflow: auto;
    background: #fff;
    .title {
      background: #f9f9f9;
      padding: 10px 20px;
      font-size: 0.865rem;
      line-height: 2rem;
      display: flex;
      justify-content: space-between;
      color: rgba(0, 0, 0, 0.61);
      text:last-child {
        color: #006cff;
      }
    }
  }
  .subBtn {
    width: 100%;
    position: fixed;
    bottom: 20px;
    padding-top: 20px;
    button {
      width: 94%;
      line-height: 100rpx;
      height: 100rpx;
      border-radius: 0.3rem;
      text-align: center;
      background: #006cff;
      color: #ffffff;
      font-size: 0.965rem;
    }
  }
  .selected-box {
    background: #ffffff;
    padding: 30px 20px;
    font-size: 0.96rem;
    & > text {
      line-height: 0.48rem;
      color: #000000;
    }
    view {
      display: flex;
      flex-wrap: wrap;
      view {
        font-size: 0.865rem;
        padding: 6rpx 12rpx;
        border: 2rpx solid rgba(0, 0, 0, 0.35);
        border-radius: 0.3rem;
        color: #333;
        margin: 24rpx 24rpx 0 0;
        position: relative;
        .close {
          position: absolute;
          display: inline-block;
          top: -15rpx;
          right: -15rpx;
          width: 26rpx;
          height: 26rpx;
          line-height: 30rpx;
          border-radius: 50%;
          background: #006cff;
          color: #ffffff;
          text-align: center;
          padding: 0;
          margin: 0;
        }
      }
      .active {
        border: 2rpx solid #006cff;
        color: #006cff;
      }
    }
  }
  .city-modal {
    padding: 20px;
    background: #ffffff;
    position: absolute;
    width: 100%;
    bottom: 0;
    box-sizing: border-box;
    z-index: 99;
    transition: top 0.5s, opacity 1.5s;
    &-header {
      display: flex;
      justify-content: space-between;
      font-size: 0.86rem;
      > text:nth-child(2) {
        color: #006cff;
      }
    }
    &-footer {
      display: flex;
      justify-content: space-between;
      padding: 10px;
      text {
        width: 35%;
        height: 1.9rem;
        border: 1px solid #006cff;
        border-radius: 0.3rem;
        font-size: 0.86rem;
        line-height: 1.9rem;
        text-align: center;
        &.cancel {
          color: #006cff;
          background: #ffffff;
        }
        &.submit {
          color: #ffffff;
          background: #006cff;
        }
      }
    }
  }
}
</style>
